<template>
    <view class="content">
        <Calendar @change="change"></Calendar>
		<u-image width="800rpx" height="200rpx" src="https://636c-cloud1-7g12v4aa40e3788a-1306685426.tcb.qcloud.la/bglogo.png?sign=6f32f9ff60aebabcfbcbd9ef3dadf5bf&t=1629443754"></u-image>
		<view class="mainContent">
			<view class="top">
				<view class="nowDate">{{date | dateFilter}}</view>
				<view>已完成：<text class="number">0</text></view>
			</view>
			<ListCard :options="options"></ListCard>
		</view>
		
    </view>
</template>

<script>
    import Calendar from '@/components/Task/calendar/calendar.vue'
	import ListCard from '@/components/Task/listCard/index.vue'
    export default {
        components:{
            Calendar,
			ListCard
        },
        data() {
            return {
				date: '',
                options: {
					title: '喂鸽子',
					content: '用饲料喂鸽子',
					avatarText: '王',
					nameText: '王小二',
					introduce: '介绍',
					curriculum: '课程',
					points: '79分'
				}
            }
        },
		filters: {
			dateFilter(e) {
				let arr = e.split('-');
				return arr[0] + '年' + arr[1] + '月' + arr[2] + '日'
			}
		},
        onLoad() {

        },
        methods: {
            change(e){
                console.log(e);
				this.date = e.fulldate;
            }

        }
    }
</script>
<style lang="scss" scoped>
$color:#86f0be;
.mainContent {
	padding: 0 40rpx;
	background-color: #F4F3F3;
	height: 600rpx;
	.top {
		height: 50rpx;
		line-height: 50rpx;
		// flex布局
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.nowDate {
		margin-bottom: 30rpx;
		color: #aaa;
		font-size: 30rpx;
		padding-left: 10rpx;
		border-left: 10rpx solid $color;
	}
	.number {
		color: $color;
		font-size: 50rpx;
	}
}
</style>